<template>
    <hl-page title="提现记录" :hidden-back="false" >
        <div class="content" slot="content">
            <cube-scroll  ref="scroll" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
                <cash-log-item v-for="item in logs" :key="item.id" :item="item"/>
            </cube-scroll>
            <div class="empty-content" v-show="logs.length == 0">
                <cube-loading v-show="loading" :size="40"></cube-loading>
                <img v-show="!loading" class="icon" src="../assets/images/empty.jpg"/>
                <p v-show="!loading"  class="label">暂无数据</p>
            </div>
        </div>

        <cube-button @click="$router.push('/user/cash')" slot="tab">我要提现
        </cube-button>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";
    import LogItem from "../components/log-item";
    import {Url} from "../utils/config";
    import CashLogItem from "../components/cash-log-item";

    export default {
        components: {
            CashLogItem,
            LogItem,
            HlPage
        },
        name: "fund",
        mounted() {
            this.onPullingDown()
        },
        data() {
            return {
                loading:false,
                page: 1,
                options: {

                    pullDownRefresh: {
                        threshold: 90,
                        stop: 40,
                        txt: '下拉刷新成功'
                    },
                    pullUpLoad: {
                        threshold: 0,
                        txt: {
                            more: '加载更多',
                            noMore: '没有更多数据了'
                        }
                    }
                },
                logs: [],
            }
        },
        methods: {
            onPullingDown() {
                this.page = 1;
                this.loadLog(this.page)
            },
            onPullingUp() {
                this.page++;
                this.loadLog(this.page)
            },
            loadLog(page) {
                this.loading = true;
                this.$get(Url.cashLog, {page: page}).then((res) => {
                    this.loading = false;
                    if (page > 1) {
                        if (res.data.length == 0) {
                            this.$refs.scroll.forceUpdate()
                        } else {
                            this.logs = this.logs.concat(res.data);
                        }
                    } else {
                        this.logs = []
                        this.logs = this.logs.concat(res.data);
                        this.$refs.scroll.forceUpdate()
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .content {
        height: 100%;
        position: relative;
        .empty-content {
            height: 100%;
            display: flex;
            left: 0;
            top: 0;
            position: absolute;
            width: 100%;
            z-index: 10000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            .icon {
                width: 200px;
                height: auto;
            }
            .label {
                margin-top: 24px;
                font-size: 14PX;
                color: #888888;
            }
        }
    }
</style>